<template>
  <el-carousel arrow="always" height="500px" :interval="0">
    <el-carousel-item v-for="carousel in carouselList" :key="carousel">
      <el-image class="w-full h-full" :src="carousel" fit="cover">
        <template #error>
          <i class="el-icon-picture-outline"></i>
        </template>
      </el-image>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
  import carouselOne from './images/1.jpg'
  import carouselTwo from './images/2.jpg'

  export default {
    name: 'NewsCarousel',
    data() {
      return {
        // 轮播图列表
        carouselList: [carouselOne, carouselTwo],
      }
    },
  }
</script>

<style scoped>
  ::v-deep .el-carousel__arrow {
    width: 80px;
    height: 80px;
    font-size: 50px;
  }
  ::v-deep .el-carousel__arrow--left {
    left: 50px;
  }
  ::v-deep .el-carousel__arrow--right {
    right: 50px;
  }
</style>
